<template>
  <div class="h-3/4 rounded-10px">
    <div class="flex flex-wrap app-item-list">
      <Card
        :class="{ 'unsubscribed-app': userType !== 0 && !app.isSubscribed }"
        v-for="app in appCardList"
        :key="app.appId"
        class="shadow-lg m-[10px]"
        :bordered="true"
        style="padding: 0; cursor: poniter; min-width: 330px; width: 330px; border-radius: 10px"
      >
        <img class="block w-full h-200px" :src="app.logoLink" />
        <div class="border-gray-300 p-4 text-gray-600 font-medium">
          <div class="font-light m-auto text-18px">{{ app.name }}</div>
        </div>

        <template #actions>
          <span v-per="'updateApp'">
            <edit-outlined @click="onEdit({ typeNo: 'edit', appId: app.appId, isSubscribed: app.isSubscribed })"
          /></span>
          <delete-outlined v-if="userType !== 0" @click="onEdit('delete')" />
          <span v-per="'updateLogo'"
            ><picture-outlined @click="onEdit({ typeNo: 'uploadImg', logoLink: app.logoLink, appId: app.appId })"
          /></span>
          <span v-per="'getAppDetail'"
            ><info-circle-outlined @click="onEdit({ typeNo: 'info', appId: app.appId })"
          /></span>
          <div v-if="app.isSubscribed === 1 || app.ifIntegrateCm === true">
            <span v-per="'changePackageStatus'">
              <a disabled>
                <arrow-down-outlined />
              </a>
            </span>
          </div>
          <div v-else>
            <span v-per="'changePackageStatus'">
              <arrow-down-outlined @click="onEdit({ typeNo: 'delist', appId: app.appId })"
            /></span>
          </div>
          <Dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              <ellipsis-outlined key="ellipsis" />
            </a>
            <template #overlay>
              <Menu>
                <MenuItem
                  v-if="app.architecture === '单体' && checkPowerByName('moduleManagement')"
                  @click="onEdit({ typeNo: 'module', appId: app.appId })"
                >
                  <div>模块管理</div>
                </MenuItem>
                <MenuItem
                  v-if="app.architecture === '微服务' && checkPowerByName('componentMgmt')"
                  @click="onEdit({ typeNo: 'componentManagement', appId: app.appId })"
                >
                  <div>组件管理{{ app?.CompId }}</div>
                </MenuItem>
                <MenuDivider />

                <MenuItem
                  v-if="app.architecture === '微服务' && checkPowerByName('componentRelationshipMgmt')"
                  @click="onEdit({ typeNo: 'componentRelationshipManagement', appId: app.appId })"
                >
                  <div>组件关系管理{{ app?.CompId }}</div>
                </MenuItem>
                <MenuDivider />

                <MenuItem
                  v-if="app.architecture === '单体' && checkPowerByName('appManagement')"
                  @click="onEdit({ typeNo: 'app', appId: app.appId })"
                >
                  <div>应用程序管理</div>
                </MenuItem>
                <MenuItem
                  v-if="app.architecture === '微服务' && checkPowerByName('componentImageMgmt')"
                  @click="onEdit({ typeNo: 'componentMirror', appId: app.appId })"
                >
                  <div>组件镜像管理{{ app?.ISO }}</div>
                </MenuItem>
                <MenuDivider />
                <div v-if="app.ifIntegrateCm === true">
                  <MenuItem @click="onEdit({ typeNo: 'authorization', appId: app.appId })">
                    <div>认证集成 {{ app?.Authorized }}</div>
                  </MenuItem>
                  <MenuDivider />
                  <MenuItem @click="onEdit({ typeNo: 'synchronization', appId: app.appId })">
                    <div>同步集成{{ app?.Synchronized }}</div>
                  </MenuItem>
                  <MenuDivider />
                </div>
                <div
                  v-if="
                    app.architecture === '单体' &&
                    app.ifIntegrateThirdApp === true &&
                    checkPowerByName('thirdAppConfiguration')
                  "
                >
                  <MenuDivider />
                  <MenuItem @click="onEdit({ typeNo: 'Integrate', appId: app.appId })">
                    <div>第三方应用集成配置{{ app?.LoginConfig }}</div>
                  </MenuItem>
                </div>
              </Menu>
            </template>
          </Dropdown>
        </template>
      </Card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Card, Dropdown, Menu, MenuItem, MenuDivider } from 'ant-design-vue';
import { ref } from 'vue';
import {
  DeleteOutlined,
  EditOutlined,
  EllipsisOutlined,
  PictureOutlined,
  InfoCircleOutlined,
  ArrowDownOutlined,
} from '@ant-design/icons-vue';
import { getSubscriptionList } from '/@/api/system-mgmt/app-mgmt/app';
import { useUserStoreWithout } from '/@/store/modules/user';
import { checkPowerByName } from '../../../../utils/permission';

const emit = defineEmits(['edit']);
const userStore = useUserStoreWithout();
// Determine whether it is a tenant or ISV : 0 -> ISV, 1 -> tenant
const userType = userStore.getUserInfo?.userType;
const appCardList = ref([]);
const getAppList = async () => {
  try {
    const appList = await getSubscriptionList();
    appCardList.value = appList;
  } catch (error) {
    // eslint-disable-next-line no-console
    console.log(error);
    throw error;
  }
};

function onEdit(params) {
  emit('edit', params);
}

defineExpose({ getAppList });

getAppList();
</script>
<style lang="less">
.app-item-list {
  .ant-card-body {
    padding: 0;
  }

  .unsubscribed-app {
    img {
      filter: grayscale(100%);
    }
  }
}
</style>
